<style lang="scss" scoped>
    .pie{
        $size:190px;
        width: $size;
        height: $size;
    }
    .pie-label{
        color:#999;
        display: flex;
        align-items: center;
        i{
            width:15px;
            height: 15px;
            display: inline-block;
            margin-right: 15px;
        }
    }
</style>
<template>
    <section>
        <centerTitle>趋势观察</centerTitle>
        <div class="bg-white flex p30">
            <div v-for="item in pieList" class="flex-1 flex column column-row-center">
                <div class="text-center f21 f-color-text">{{item.title}}</div>
                <ui-echarts :option="echartPie(item.value)" class="pie"></ui-echarts>
                <div class="f16">
                    <div class="pie-label mb15">
                        <i :style="{background:echartPie().colors[0]}"></i>
                        合格: {{ item.pass }} 家
                    </div>
                    <div class="pie-label">
                        <i :style="{background:echartPie().colors[1]}"></i>
                        不合格: {{ item.noPass }} 家
                    </div>
                </div>
            </div>
        </div>
    </section>
</template>
<script>
    import centerTitle from './title'
    export default {
        components:{
            centerTitle
        },
        data(){
            return {
                pieList:[
                    {title:'综合实力',value:0,responseKey:'Integration'},
                    {title:'产品',value:0,responseKey:'product'},
                    {title:'运营',value:0,responseKey:'operation'},
                    {title:'硬件',value:0,responseKey:'hardware'},
                    {title:'客服',value:0,responseKey:'Officer'},
                ],
            }
        },
        methods:{
            echartPie(value=0){
                const colors = ['#ff6c00', '#eee'];
                return {
                    colors: colors,
                    series: [
                        {
                            data: [
                                { value: value, name: '' },
                                { value: 100-value, name: '' },
                            ],
                            type: 'pie',
                            radius: ['40%', '70%'],
                            avoidLabelOverlap: false,
                            hoverAnimation: false,
                            itemStyle: {
                                normal: {
                                    color: function (params) {
                                        return colors[params.dataIndex];
                                    },
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                }
                            },
                        }
                    ]
                }
            }
        },
        mounted(){
            // 测评趋势观察
            this.$http.get('index.php?g=home&m=paperRecord&a=get_node_pass&paper_id=13')
            .then(({data})=>{
                console.log('测评趋势观察',data)
                if (data.code===1) {
                    let res = data.data
                    this.pieList.forEach((item)=>{
                        for (let key in res) {
                            if (key === item.responseKey) {
                                item.value = res[key].percent *100
                                this.$set(item,'noPass', res[key]['不合格'])
                                this.$set(item,'pass', res[key]['合格'])
                            }
                        }
                    })

                }
            })
        },
    }
</script>
